<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" id="vp" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<title>积分明细</title>
	
		<link href="../../../css/style.css" rel="stylesheet" type="text/css">
		<link href="../../../css/mui.css" rel="stylesheet" type="text/css">
		<style>
			.mui-control-content {
				background-color: white;
				
			}
			.mui-control-content .mui-loading {
				margin-top: 50px;
			}
			#integraldetail .mui-table-view .mui-table-view-cell{
				border-bottom: solid 1px #f0f0f0;
				margin: 0 15px;
			}
			.mui-table-view-cell{
				padding: 11px 3px;
			}
			.mui-segmented-control.mui-segmented-control-inverted{
				width:50%;
				margin: 0 auto;
			}
			#segmentedControl{
				text-align: center;
			}
			#segmentedControl ul li{
				display: inline-block;
				width: 20%;
			}
			#segmentedControl a{
				width: 45%;
				border: none;
				background: none;
				border-bottom: solid 2px #fff;
				line-height: 20px!important;
				overflow:inherit
			}
			.mui-segmented-control .mui-control-item.mui-active{
				border-bottom: solid 2px #23aae2!important;
				color: #23aae2!important;
			}
			#nowDate{
				margin-bottom: 0;
				background:none ;
				font-size: 12px;
				color: #787d81;
				border: none;
			}
			.mui-navigate-right:after, .mui-push-left:after, .mui-push-right:after{
				color: #999da0;
				font-size: 18px;
			}
			.integralContent{
				border-radius: 100%;
			}
			.integralContent .mui-pull-left {
				color: #898989;
			}
			.integralContent .mui-pull-left p{
				color: #898989;
			}
			.integralContent .mui-pull-left span{
				color: #323232;
				padding-left: 10px;
			}
			.integralContent .mui-pull-right{
				color: #efa417;
				text-align: right;
				font-size: 16px;
				overflow: inherit;
			}
			.integralContent .mui-pull-left p{
				color:#949897 ;
			}
			.mui-table-view-cell > a:not(.mui-btn){
				overflow: inherit;
			}
			.mui-table-view-cell:after{
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="integraldetail">
		<div class="mui-table-view mui-table-view-chevron">
	        <input type="month" id="nowDate"  class="mui-navigate-right"/>  
  		</div>
  		<div class="">
  			<div class="mui-content">
			<div id="slider" class="mui-slider">
				<div id="segmentedControl" class="mui-segmented-control">
					<ul>
						<li><a class="mui-control-item mui-active" href="#item1" @tap='all()'>全部</a></li>
						<li><a class="mui-control-item" href="#item2" @tap="shouru()">收入</a></li>
						<li><a class="mui-control-item" href="#item3" @tap="zhichu()">支出</a></li>
					</ul>
				</div>
			</div>
				<div>
				<div id="jifenall" class="mui-control-content mui-active">
					<div id="scroll" class="mui-scroll-wrapper">
						<div class="mui-scroll">
							<ul class="mui-table-view">
								<li class="mui-table-view-cell mui-media" v-for="item in items">
									<a href="javascript:;" class="integralContent">
										<img class="mui-media-object mui-pull-left" :src="item.member_avatar">
										<div class="mui-media-body mui-pull-left">
											<p class="mui-ellipsis">{{item.member_name}}<span>{{item.rule}}</span></p>
											{{item.time}}
										</div>
										<div class="mui-media-body mui-pull-right">
											{{item.number}}
											<p class="mui-ellipsis">余额：54</p>
										</div>
									</a>
									<div class="clear"></div>
								</li>
								
							</ul>
						</div>
					</div>
				</div>
				
			</div>
			</div>
		</div>
  		</div>
		</div>
		<script src="../../../js/mui.js"></script>
		<script src="../../../js/vue.min.js"></script>
		<script src="../../../js/jquery-1.8.3.min.js"></script>
		<script src="../../../js/app.js"></script>
		<script>
			
			mui.init();
			var state='';
			var uid='';
			mui.plusReady(function(){
				state=app.getState();
				uid=state.userid;
				document.getElementById('jifenall').style.height=document.documentElement.clientHeight+'px'
				mui.post(Apiurl+'index/jifeninfo',{
					uid:uid
				},function(data){
					integraldetail.items=data;				
				},'json')
			})
			var integraldetail=new Vue({
				el:'#integraldetail',
				data:{
					items:[]
				},
				methods:{
					all: function(){
						mui.post(Apiurl+'index/jifeninfo',{
							uid:uid,
						},function(data){
							integraldetail.items=data;				
						},'json')
					},
					shouru: function(){
						mui.post(Apiurl+'index/jifeninfo',{
							uid:uid,
							type:1 
						},function(data){
							integraldetail.items=data;				
						},'json')
					},
					zhichu: function(){
						mui.post(Apiurl+'index/jifeninfo',{
							uid:uid,
							type:2
						},function(data){
							integraldetail.items=data;				
						},'json')

					}
				}
			})
			document.getElementById('nowDate').addEventListener('input',function(){
				mui.post(Apiurl+'index/jifeninfo',{
							uid:uid,
							time:this.value
						},function(data){
							integraldetail.items=data;				
						},'json')
			})
		$(function () {
            NOW();
          
        });
        //初始化时间控件
        function NOW() {
            var now = new Date();
            var nowYear = now.getFullYear(); //年
            var nowMonth = now.getMonth() + 1  //月 
            var nowDate = nowYear + "-" + nowMonth  
            $("#nowDate").val(nowDate);
           
        }
 
        $(function () {
            $("#btnNow").click(function () {
                NOW();
            });
        });
       
        $("#btn").click(function () {
            var nDate = $("#nowDate").val();
            var nTime = $("#nowTime").val();
            alert(nDate + " " + nTime);
        }); 
        mui.init({
				swipeBack: false
			});
			(function($) {
				$('.mui-scroll-wrapper').scroll({
					indicators: true //是否显示滚动条
				});
				var html2 = '<ul class="mui-table-view"><li class="mui-table-view-cell">第二个选项卡子项-1</li><li class="mui-table-view-cell">第二个选项卡子项-2</li><li class="mui-table-view-cell">第二个选项卡子项-3</li><li class="mui-table-view-cell">第二个选项卡子项-4</li><li class="mui-table-view-cell">第二个选项卡子项-5</li></ul>';
				var html3 = '<ul class="mui-table-view"><li class="mui-table-view-cell">第三个选项卡子项-1</li><li class="mui-table-view-cell">第三个选项卡子项-2</li><li class="mui-table-view-cell">第三个选项卡子项-3</li><li class="mui-table-view-cell">第三个选项卡子项-4</li><li class="mui-table-view-cell">第三个选项卡子项-5</li></ul>';
				var item2 = document.getElementById('item2mobile');
				var item3 = document.getElementById('item3mobile');
				document.getElementById('slider').addEventListener('slide', function(e) {
					if (e.detail.slideNumber === 1) {
						if (item2.querySelector('.mui-loading')) {
							setTimeout(function() {
								item2.querySelector('.mui-scroll').innerHTML = html2;
							}, 500);
						}
					} else if (e.detail.slideNumber === 2) {
						if (item3.querySelector('.mui-loading')) {
							setTimeout(function() {
								item3.querySelector('.mui-scroll').innerHTML = html3;
							}, 500);
						}
					}
				});
				var sliderSegmentedControl = document.getElementById('sliderSegmentedControl');
				$('.mui-input-group').on('change', 'input', function() {
					if (this.checked) {
						sliderSegmentedControl.className = 'mui-slider-indicator mui-segmented-control mui-segmented-control-inverted mui-segmented-control-' + this.value;
						//force repaint
						sliderProgressBar.setAttribute('style', sliderProgressBar.getAttribute('style'));
					}
				});
			})(mui);
			//处理返回键
				var backButtonPress = 0;
				mui.back = function(event) {
					var ws=plus.webview.currentWebview()
					if(ws) {
						ws.close();
					}else {
						backButtonPress++;
						if(backButtonPress > 1) {
							plus.runtime.quit();
						} else {
							plus.nativeUI.toast('再按一次退出应用');
						}
						setTimeout(function() {
							backButtonPress = 0;
						}, 1000);
						return false;
					}
				};
		</script>
	</body>
</html>
